<template lang="pug">
    el-dialog.upload-dialog(
        :visible.sync='visible'
        title='导入文件'
        width='560px'
        append-to-body
        :show-file-list="false"
        :close-on-click-modal="false"
        @close='handleClose')
        el-upload(
            ref="upload"
            action="#"
            limit="1"
            accept=".xlsx,.xls,.XLSX,.XLS"
            :http-request="handleUpload"
            :before-upload="checkBeforeUpload"
            :on-remove="removeFile"
            drag
        )
            .text
                span 拖拽导入文件到此处，或点击右侧按钮
                el-button(type="primary" size="mini" slot="trigger") 选择文件
            .tip
                span 注：导入文件仅支持xls
                el-button(plain @click="downloadExample" size="mini") 下载模板示例
        span(slot="footer" :class="{ 'flex-space-between': autoCreateTemplate }")
            .btn-wrap
                el-button(@click="run(false)") 取消
                el-button(type="primary" @click="handleSubmit" style="margin-left:16px;" :loading="uploadLoading") 确定
</template>

<script>
export default {
    name: 'upload-dialog',
    props: {},
    data() {
        return {
            file: null,
            visible: false,
            uploadLoading: false,
        }
    },
    methods: {
        run(status = true) {
            this.visible = status
            if (status) {
                this.file = null
            }
        },
        handleClose() {
            this.$refs.upload.clearFiles()
        },
        removeFile() {
            this.file = null
            this.$refs.upload.clearFiles()
        },
        checkBeforeUpload(file) {
            // 自定义上传前处理逻辑 检查文件类型只能是这些类型accept=".xlsx,.xls,.XLSX,.XLS"
            if (!['xlsx', 'xls'].includes(file.name.split('.')[1])) {
                this.$message.error('只能上传 .xlsx, .xls文件!')
                return false
            }
            return true

        },
        handleUpload(file) {
            this.file = file.file
        },
        handleSubmit() {
            if (!this.file) {
                this.$message.error('请选择文件')
                return
            }
            this.uploadLoading = true
            const formData = new FormData()
            formData.append('file', this.file)
            this.$service.common
                .uploadCommonFile(formData)
                .then(resp => {
                    const {code, message} = resp.body
                    if (code === 0) {
                        this.$message.success('上传成功')
                        this.$emit('success')
                    } else {
                        this.$message.error(message)
                    }
                })
                .finally(() => {
                    this.uploadLoading = false
                })
            this.run(false)
        },
        downloadExample() {
            // 下载模板示例
            const link = document.createElement('a')
            link.style.display = 'none'
            link.href = `${location.origin}/api/xxxxx`
            document.body.append(link)
            link.click()
            setTimeout(() => {
                link.remove()
                this.$message.success('下载完成')
            }, 500)
            return false
        },
        // beforeUpload(file) {
        //     // 自定义上传前处理逻辑，例如检查文件类型和大小等
        //     const isExcel =
        //         file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
        //         file.type === 'application/vnd.ms-excel'
        //     const isLt500K = file.size / 1024 < 500

        //     if (!isExcel) {
        //         this.$message.error('只能上传 Excel 文件!')
        //     }
        //     if (!isLt500K) {
        //         this.$message.error('文件大小不能超过 500kb!')
        //     }
        //     return isExcel && isLt500K
        // },
        // handleExceed(files, fileList) {
        //     // 超出文件数量限制时的回调
        //     this.$message.warning(
        //         `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
        //             files.length + fileList.length
        //         } 个文件`
        //     )
        // },
    },
}
</script>

<style lang="scss" scoped>
.upload-dialog {
    ::v-deep .el-upload {
        width: 100%;

        .el-upload-dragger {
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 117px;
            background-color: #f7f9fc;
        }
    }

    ::v-deep .el-dialog__header {
        padding: 16px 0px 16px 24px;

        span {
            font-size: 16px;
            font-weight: 600;
        }

        i {
            font-size: 24px;
        }
    }

    ::v-deep .el-dialog__body {
        padding: 24px 29px;
        border-top: 1px solid #e7e6f2;
        border-bottom: 1px solid #e7e6f2;
    }

    ::v-deep .el-dialog__footer {
        padding: 12px 24px 12px 0;
    }

    .text {
        margin-bottom: 10px;

        span {
            margin-right: 12px;
            color: #2e57e5;
        }
    }

    .tip {
        span {
            margin-right: 8px;
            font-size: 12px;
        }
    }

    .flex-space-between {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
</style>
